<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue';

// const img = document.createElement('img')
const target = ref<HTMLImageElement | null>(null)
// stop 停止监听元素
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  // isIntersecting -> 监听的元素是否进入到了可视区
  if (isIntersecting) {
    console.log('是否进入到可视区', isIntersecting);
    // 进入到可视区了...
    target.value!.src = 'https://yanxuan-item.nosdn.127.net/c440b18e4565a1f8a6df9ebdf7ab9de6.jpg'
    stop()  // 停止监听
  }
})
</script>

<template>
  <div style="height: 2500px"></div>
  <!-- src : https://yanxuan-item.nosdn.127.net/c440b18e4565a1f8a6df9ebdf7ab9de6.jpg -->
  <img ref="target" alt="">
</template>

<style scoped lang="less">
</style>